<template>
  
  <view class="out">
   <!-- --------------------公文类型----------------------- -->
    <view class="t1" >公文类型：</view>
     <view class="box1">       
         <view v-for="(item,index) in list1" class="r1" :key="index" :class="index==navIndex && flag==true ? 'active' : '' ">
            <text @click="clickNav(index)">{{item}}</text>
         </view>  
     </view> 
      <!-- ----------------经办部门--------------------------- -->
     <view class="t2">经办部门：</view>
     <view class="box1">
        <view v-for="item in list2" class="r1" :key="index">
           <text>{{item}}</text>
         </view>
     </view>    
     <view class="box1">
         <view v-for="item in list3" class="r1" :key="index">
           <text>{{item}}</text>
         </view>         
     </view>  
     <!-- -----------------文件状态-------------------------- -->
        <view class="t2">文件状态：</view>
        <view class="box1">
            <view v-for="item in list4" class="r1" :key="index">
              <text>{{item}}</text>
            </view>         
        </view>  
    <!-- ------------------发布日期--------------------------------- -->
    <view class="t2">发布日期：</view>
     <view class="box1">
         <view v-for="item in list5" class="r1" :key="index">
           <text>{{item}}</text>
         </view>         
     </view>  
     <view class="box1">
         <view v-for="item in list6" class="r1" :key="index">
           <text>{{item}}</text>
         </view>         
     </view>  
     <view class="box1">
         <view v-for="item in list7" class="r1" :key="index">
           <text>{{item}}</text>
         </view>         
     </view>  
     <!-- ----------------------------------------------------- -->
     <view class="button">
       <text>确定</text>
     </view>
     
     
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list1:['管理制度','人事任免','机构设置','更多'],
        list2:['办公室','专卖办','法规科','人事科'],
        list3:['党建科','纪检科','安全科','更多'],
        list4:['现行','废止'],
        list5:['本周','本月','近一个月','近三个月'],
        list6:['今年','近一年'],
        list7:['指定日期'],
        navIndex:0,
        flag:false
      };
    },    
    methods:{
     //点击导航
     clickNav(index){
       this.flag=true
       this.navIndex=index;
     }
    
    }
  }
  
</script>

<style lang="scss">
.out{
  

  .t1{   
    margin-top: 30rpx;
    margin-left: 30rpx;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 23.17px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
  }
  .box1{
    display: flex;
    margin-top: 50rpx;
    .r1{
      margin-left: 30rpx;
      text-align: center;
      font-size: 13px;
      width: 73px;
      height: 22px;
      opacity: 1;
      border-radius: 20px;
      background: rgba(255, 255, 255, 1);
      // background: var(bgr)
      border: 1px solid rgba(189, 189, 189, 1);  
      &.active{
        background: #405BDE;
      }
    }
  }
  .t2{
    margin-top: 30rpx;
    margin-left: 30rpx;
    font-size: 16px;
    font-weight: 400;
    
  }
  

}

.button{
  
  width: 250rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 1);
  margin-left: 400rpx;
  align-items: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
  text{
    font-size: 20px;
    margin: 50rpx 0;
   
  }
}




</style>
